<!-- 已保存的群聊 -->
<template>
  <div id="GroupChat">
    <!-- 头部 -->
    <Head BackType1="1" title="已保存的群聊"></Head>
    <div id="GroupChatBox">
      <nothing v-show="!hasInfo" nothing="暂时没有群聊列表"></nothing>
      <div class="GroupMain"  v-show="hasInfo">
          <!-- 群聊 盒子-->
        <div class="GroupBox BoxActive" v-for="(group,index) in groups" :key="index">
          <div class="GroupList">
            <img alt="" :src="group.picture" />
            <div class="GroupName">{{group.name}}</div>
          </div>
        </div>
        <!-- 群聊 盒子-->
      </div>
    </div> 
    <div class="GroupNum">共5个群聊</div>
  </div>
</template>

<script>
// import logoNav from '@/components/logoNav'
import Head from '@/components/Head'
import nothing from '@/components/nothing'

export default {
    name:'GroupChat',
    data() {
			return {
        groups:[
          {picture:require('@/assets/img/NewFriends.png'),name:'新朋友'},
          {picture:require('@/assets/img/AddFriend.png'),name:'添加好友'},
          {picture:require('@/assets/img/GroupChat.png'),name:'已保存群聊'},
        ],
        hasInfo:false,
      }
    },
    components:{
      Head,
      nothing,
    },
    mounted(){
      /**
      * 获取群聊列表
      */
      this.$get(urlConfig.showGroup)
      .then(res => {
        if(res.data.list.length ==0){
          
        }else{
          this.hasInfo = true;
          this.groups = res.data.list
        }
      })
    }
}
</script>

<style scoped lang='less'>
#GroupChat{
  font-size: 28px;
  #GroupChatBox{
    margin-top: 10px;
    position: fixed;
    top: 88px;
    overflow: scroll;
    width: 100%;
    z-index: 10;
    .GroupMain{
      padding-left:30px;
      background: #fff;
      .GroupList{
        display: flex;
        height: 110px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e8e8e8;
        img{
          width: 80px;
          height: 80px;
        }
        .GroupName{
          height: 110px;
          width: 570px;
          padding-right: 30px;
          line-height: 109px;
        }
      }
      &:last-child .GroupList{
        border-bottom: 0px;
      }
    }
    .GroupNum:before {
      content: '';
      width: 80px;
      height: 1px;
      border-bottom: 1px solid #ccc;
      display: inline-block;
      margin-right: 24px;
      margin-bottom: 10px;
    }
    .GroupNum:after {
      content: '';
      width: 80px;
      height: 1px;
      border-bottom: 1px solid #ccc;
      display: inline-block;
      margin-left: 24px;
      margin-bottom: 10px;
    }
  } 
}
</style>
